<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- 범례 설정 -->
<div class="ddp-ui-chart-side ddp-show">
  <!-- title -->
  <div class="ddp-ui-side-title">
    {{'msg.page.ui.legend.title' | translate}}
  </div>
  <!-- //title -->
  <div class="ddp-wrap-downmenu">
    <div class="ddp-box-down">
      <div class="ddp-wrap-divide">
        <!-- slider -->
        <div class="ddp-wrap-option-slider">
          <span class="ddp-label-slider">{{'msg.page.ui.legend.show.legend' | translate}}</span>
          <!-- Slide THREE -->
          <div class="ddp-checkbox-slide ddp-checkbox-automatic2">
            <input type="checkbox" id="check2" [ngModel]="uiOption.legend.auto && uiOption.legend.showName"
                   [disabled]="false === uiOption.legend.auto"
                   (click)="toggleLegend()">
            <label for="check2"><span class="ddp-slide"></span></label>
          </div>
          <!-- //Slide THREE -->
        </div>
        <!-- //slider -->

        <div class="ddp-wrap-option-multy ddp-clear" *ngIf="uiOption.legend.auto && uiOption.legend.showName">
          <div class="ddp-col-5">
            <span class="ddp-label-txt">{{'msg.page.ui.legend.legend.position' | translate}}</span>
          </div>
          <div class="ddp-col-7">
            <!-- selectbox -->
            <component-select
              [array]="legendPositionList"
              [viewKey]="'name'"
              [defaultIndex]="getLegendPosIndex()"
              (onSelected)="changeLegendPos($event)">
            </component-select>
            <!-- //selectbox -->
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- //범례 설정 -->
